<template>
  <div class="flow-attr">
    <el-form
      v-if="validateNodeJob()"
      label-position="left"
      class="flow-config-attr"
      label-width="90px"
    >
      <div v-if="_value.props.tasks.length === 1" style="margin: 5px 5px">
        <span style="font-size: 14px; color: red"
          >注:当前节点没有单独配置【节点任务】, 作为节点默认的任务属性配置</span
        >
      </div>
      <el-form-item label="任务名称">
        <el-input v-model="data.task.name" class="input-attr" placeholder="请输入任务名称" />
      </el-form-item>
      <el-divider style="margin-top: 30px">审批人设置</el-divider>
      <el-form-item label="办理人类型">
        <el-radio-group v-model="data.task.jobType" @change="handleJobTypeChange">
          <el-radio
            v-for="(item, index) in DIC_PROP.JOB_TYPE"
            :key="index"
            :value="item.value"
            :label="item.label"
          />
        </el-radio-group>
      </el-form-item>
      <template v-if="_value.type === 'Start' || _value.type === 'End' || _value.type === 'Job'">
        <el-form-item v-if="data.task.jobType === '0'" label="办理人员">
          <el-button
            style="margin-right: 10px"
            round
            size="small"
            type="primary"
            @click="handleUserPickerShow('0')"
          >
            选择人员
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-for="(tag, index) in data.task.userList"
              :key="tag.id"
              closable
              type="primary"
              @close="data.task.userList.splice(index, 1)"
              style="margin-right: 10px"
            >
              {{ tag.text }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item v-if="data.task.jobType === '1'" label="办理角色">
          <el-button
            style="margin-right: 10px"
            round
            size="small"
            type="primary"
            @click="handleRolePickerShow"
          >
            选择角色
          </el-button>
          <div class="w-org-items">
            <el-tag
              v-for="(tag, index) in data.task.roleList"
              :key="tag.id"
              closable
              type="primary"
              @close="data.task.roleList.splice(index, 1)"
              style="margin-right: 10px"
            >
              {{ tag.text }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item
          v-if="data.task.jobType === '4' || data.task.jobType === '5' || data.task.jobType === '6'"
          label="谁的主管"
        >
          <div v-if="data.task.jobType === '4' || data.task.jobType === '5'">
            <el-radio-group
              v-model="data.task.dynamicUserType"
              @change="handleDynamicUserTypeChange"
            >
              <el-radio
                v-for="(item, index) in DIC_PROP.WHOSE_TYPE"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-radio-group>
            <div style="display: flex; justify-content: start">
              <div v-if="data.task.dynamicUserType === '1'">
                <el-button
                  style="margin-right: 10px"
                  round
                  size="small"
                  type="primary"
                  @click="handleUserPickerShow('1')"
                >
                  选择人员
                </el-button>
              </div>
              <div>
                <el-tag
                  v-if="data.task.dynamicUserType === '1' && data.task.dynamicUserId"
                  closable
                  type="primary"
                  @close="data.task.dynamicUserId = null"
                  style="margin-right: 10px"
                >
                  {{ data.task.dynamicUserName }}
                </el-tag>
                <span style="margin-right: 10px">{{
                  data.task.jobType === "4" ? "第" : "连续"
                }}</span>
                <el-input-number
                  v-model="data.task.dynamicUserLeaderLevel"
                  :min="-1"
                  :max="10"
                  :step="1"
                  style="width: 100px"
                />
                <span>&nbsp;级主管</span>
                <el-tooltip placement="top" content="-1表示直达最上层主管，0表示指定人员部门主管">
                  <el-icon style="margin-left: 10px"><QuestionFilled /> </el-icon>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div v-if="data.task.jobType === '6'">
            <el-button
              style="margin-right: 10px"
              round
              size="small"
              type="primary"
              @click="handleUserPickerShow('2')"
            >
              选择部门
            </el-button>
            <el-tag
              v-if="data.task.dynamicDeptId"
              closable
              type="primary"
              @close="
                () => {
                  data.task.dynamicDeptId = null;
                  data.task.dynamicDeptName = null;
                }
              "
              style="margin-right: 10px"
            >
              {{ data.task.dynamicDeptName }}
            </el-tag>
            <span>&nbsp;主管</span>
          </div>
        </el-form-item>
        <el-form-item v-if="data.task.jobType === '7'" label="表单字段">
          <el-select v-model="data.task.dynamicUserKey" clearable filterable>
            <el-option
              v-for="(item, index) in data.formItemList"
              :key="index"
              :label="getFormItemLabel(item)"
              :value="getFormItemKey(item)"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="提取规则"
          v-if="
            data.task.jobType === '4' ||
            data.task.jobType === '5' ||
            data.task.jobType === '6' ||
            data.task.jobType === '7'
          "
        >
          <el-radio-group v-model="data.task.dynamicEmptyMethod" style="width: 283px">
            <el-radio
              v-for="(item, index) in EXTRACTS"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-radio-group>
        </el-form-item>
      </template>
      <el-divider />
      <el-form-item label="任务时限">
        <el-input-number
          v-model="data.task.timeout"
          class="input-attr"
          placeholder="小于0则不限制"
        />
      </el-form-item>
      <el-form-item label="任务排序">
        <el-input-number v-model="data.task.sort" class="input-attr" :min="1" />
      </el-form-item>
    </el-form>
    <OrgUserPicker
      ref="userPickerRef"
      :multiple="data.userPickerType === '0'"
      :type="data.userPickerType === '0' || data.userPickerType === '1' ? 'user' : 'dept'"
      @ok="handleUserPickerConfirm"
    />
    <RolePicker ref="rolePickerRef" @change="handleRolePickerConfirm" />
  </div>
</template>
<script setup lang="ts">
import type { FlowModelNode, FlowModelNodeTask } from "../../ProcessDef";
import { validateNull } from "@/utils/validate";
import { DIC_PROP } from "../../ProcessDict";
import { queryFormItemList } from "@/api/flow/form/";
import OrgUserPicker from "../../../OrgUserPicker.vue";
import RolePicker from "@/components/rolePicker.vue";
import { getFormItemLabel, getFormItemKey } from "@/views/design/form/FormItem";
import { ref, reactive, onMounted, watchEffect } from "vue";

const props = defineProps({
  taskIndex: Number,
  defFlow: Object
});

const _value = defineModel<FlowModelNode>();

const userPickerRef = ref(null);
const rolePickerRef = ref(null);

const data = reactive({
  //选择人员用途 0：办理人 1：人员部门主管 2:指定部门主管
  userPickerType: "0",
  formItemList: [],
  task: {} as FlowModelNodeTask
});

const EXTRACTS = [
  {
    label: "无法找到时由系统管理员代审批",
    value: "0"
  },
  {
    label: "无法找到时[按空]处理",
    value: "1"
  }
];

const queryFormFieldData = () => {
  queryFormItemList(props.defFlow.formId).then(res => {
    if (res.code === 200) {
      data.formItemList = res.data;
    }
  });
};

const init = () => {
  data.task = _value.value.props.tasks[props.taskIndex];
  if (props.taskIndex > 0) {
    data.task.sort = props.taskIndex + 1;
  }
  queryFormFieldData();
};

onMounted(() => {
  init();
});

watchEffect(() => {
  init();
});

const handleUserPickerShow = type => {
  data.userPickerType = type;
  userPickerRef.value.show();
};

function handleUserPickerConfirm(users) {
  if (data.userPickerType === "0") {
    data.task.userList = users;
    data.task.userId = "";
  } else if (data.userPickerType === "1") {
    data.task.dynamicUserId = users[0].id;
    data.task.dynamicUserName = users[0].text;
  } else if (data.userPickerType === "2") {
    data.task.dynamicDeptId = users[0].id;
    data.task.dynamicDeptName = users[0].text;
  }
}

const handleRolePickerShow = () => {
  rolePickerRef.value.show();
};

const handleRolePickerConfirm = roles => {
  data.task.roleList = roles;
  data.task.roleId = "";
};

const handleDynamicUserTypeChange = val => {
  if (val === "0") {
    data.task.dynamicUserId = null;
    data.task.dynamicUserName = null;
  }
};

const validateTask = () => {
  if (!data.task) data.task = _value.value.props.tasks[props.taskIndex];
  if (validateNull(data.task)) return false;
  return true;
};

const clearUserIdOrRoleId = (clearUserId, clearRoleId) => {
  if (clearUserId) {
    data.task.userList = [];
  }
  if (clearRoleId) {
    data.task.roleList = [];
  }
};

const handleJobTypeChange = type => {
  if (!validateTask()) {
    return;
  }
  data.task.jobType = type;
  if (type === DIC_PROP.JOB_TYPE[0].value) {
    clearUserIdOrRoleId(false, true);
    data.task.dynamicUserId = "";
    data.task.dynamicUserName = "";
    data.task.dynamicDeptId = "";
    data.task.dynamicDeptName = "";
    data.task.dynamicUserKey = "";
  } else if (type === DIC_PROP.JOB_TYPE[1].value) {
    clearUserIdOrRoleId(true, false);
    data.task.dynamicUserId = "";
    data.task.dynamicUserName = "";
    data.task.dynamicDeptId = "";
    data.task.dynamicDeptName = "";
    data.task.dynamicUserKey = "";
  } else {
    clearUserIdOrRoleId(true, true);
    if (type === "3") {
      data.task.dynamicUserId = "";
      data.task.dynamicUserName = "";
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
      data.task.dynamicUserKey = "";
    } else if (type === "4" || type === "5") {
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
      if (data.task.dynamicUserType === "0") {
        data.task.dynamicUserId = "";
        data.task.dynamicUserName = "";
      }
    } else if (type === "6") {
      data.task.dynamicUserId = "";
      data.task.dynamicUserName = "";
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
    } else if (type === "7") {
      data.task.dynamicUserId = "";
      data.task.dynamicUserName = "";
      data.task.dynamicDeptId = "";
      data.task.dynamicDeptName = "";
    }
  }
};

const validateNodeJob = () => {
  if (!validateTask()) {
    return false;
  }
  if (data.task.jobType === "0") {
  }
  return (validateNode() && data.task) || _value.value.type === "Job";
};

const validateNode = () => {
  if (!validateTask()) {
    return false;
  }
  const type = _value.value.type;
  return type === "Start" || type === "End" || type === "Job";
};
</script>
<style lang="scss" scoped>
@use "@/assets/style/design/flow-attr.scss";
@use "@/assets/style/design/flow-drawer.scss";
</style>
